<template>
  <div class="demo">
    <span style="margin-right: 16px">Change direction of components:</span>
    <Radio.Group v-model:value="state.direction">
      <Radio.Button value="ltr">LTR</Radio.Button>
      <Radio.Button value="rtl">RTL</Radio.Button>
    </Radio.Group>
    <Divider />
    <ConfigProvider :direction="state.direction">
      <div class="demo-direction">
        <Row>
          <Col :span="24">
            <Divider orientation="left">Cascader example</Divider>
            <Cascader
              :options="cascaderOptions"
              placeholder="یک مورد انتخاب کنید"
              :placement="state.popupPlacement"
              @change="onCascaderChange"
            >
              <template #suffixIcon><SearchIcon /></template>
            </Cascader>
            &nbsp;&nbsp;&nbsp;&nbsp; With search:
            <Cascader
              :options="cascaderOptions"
              placeholder="Select an item"
              :placement="state.popupPlacement"
              :show-search="{ filter: cascaderFilter }"
              @change="onCascaderChange"
            >
              <template #suffixIcon><SmileOutlined /></template>
            </Cascader>
          </Col>
        </Row>
        <br />
        <Row>
          <Col :span="12">
            <Divider orientation="left">Switch example</Divider>
            &nbsp;&nbsp;
            <Switch default-checked />
            &nbsp;&nbsp;
            <Switch loading default-checked />
            &nbsp;&nbsp;
            <Switch size="small" loading />
          </Col>
          <Col :span="12">
            <Divider orientation="left">Radio Group example</Divider>
            <Radio.Group default-value="c" button-style="solid">
              <Radio.Button value="a">تهران</Radio.Button>
              <Radio.Button value="b" disabled>اصفهان</Radio.Button>
              <Radio.Button value="c">فارس</Radio.Button>
              <Radio.Button value="d">خوزستان</Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
        <br />
        <Row>
          <Col :span="12">
            <Divider orientation="left">Button example</Divider>
            <div class="button-demo">
              <Button type="primary">
                <template #icon><DownloadOutlined /></template>
              </Button>
              <Button type="primary" shape="circle">
                <template #icon><DownloadOutlined /></template>
              </Button>
              <Button type="primary" shape="round">
                <template #icon><DownloadOutlined /></template>
              </Button>
              <Button type="primary" shape="round">
                <template #icon><DownloadOutlined /></template>
                Download
              </Button>
              <Button type="primary">
                <template #icon><DownloadOutlined /></template>
                Download
              </Button>
              <br />
              <Button-group>
                <Button type="primary">
                  <LeftOutlined />
                  Backward
                </Button>
                <Button type="primary">
                  Forward
                  <RightOutlined />
                </Button>
              </Button-group>
              <Button type="primary" loading>Loading</Button>
              <Button type="primary" size="small" loading>Loading</Button>
            </div>
          </Col>
          <Col :span="12">
            <Divider orientation="left">Tree example</Divider>
            <Tree
              v-model:expandedKeys="expandedKeys"
              v-model:selectedKeys="selectedKeys"
              v-model:checkedKeys="checkedKeys"
              show-line
              checkable
              :tree-data="treeData"
            >
              <template #title="{ title, key }">
                <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
                <template v-else>{{ title }}</template>
              </template>
            </Tree>
          </Col>
        </Row>
        <br />
        <Row>
          <Col :span="24">
            <Divider orientation="left">Input (Input Group) example</Divider>
            <Input.Group size="large">
              <Row :gutter="8">
                <Col :span="5">
                  <Input default-value="0571" />
                </Col>
                <Col :span="8">
                  <Input default-value="26888888" />
                </Col>
              </Row>
            </Input.Group>
            <br />
            <Input.Group compact>
              <Input style="width: 20%" default-value="0571" />
              <Input style="width: 30%" default-value="26888888" />
            </Input.Group>
            <br />
            <Input.Group compact>
              <Select default-value="Option1">
                <Select.Option value="Option1">Option1</Select.Option>
                <Select.Option value="Option2">Option2</Select.Option>
              </Select>
              <Input style="width: 50%" default-value="input content" />
              <InputNumber />
            </Input.Group>
            <br />
            <Input.Search placeholder="input search text" enter-button="Search" size="large" />
            <br />
            <br />
            <div style="margin-bottom: 16px">
              <Input default-value="mysite">
                <template #selectBefore>
                  <Select default-value="Http://" style="width: 90px">
                    <Select.Option value="Http://">Http://</Select.Option>
                    <Select.Option value="Https://">Https://</Select.Option>
                  </Select>
                </template>
                <template #selectAfter>
                  <Select default-value=".com" style="width: 80px">
                    <Select.Option value=".com">.com</Select.Option>
                    <Select.Option value=".jp">.jp</Select.Option>
                    <Select.Option value=".cn">.cn</Select.Option>
                    <Select.Option value=".org">.org</Select.Option>
                  </Select>
                </template>
              </Input>
            </div>
            <br />
            <Row>
              <Col :span="12">
                <Divider orientation="left">Select example</Divider>
                <Select mode="multiple" default-value="مورچه" style="width: 120px">
                  <Select.Option value="jack">Jack</Select.Option>
                  <Select.Option value="مورچه">مورچه</Select.Option>
                  <Select.Option value="disabled" disabled>Disabled</Select.Option>
                  <Select.Option value="Yiminghe">yiminghe</Select.Option>
                </Select>
                <Select default-value="مورچه" style="width: 120px" disabled>
                  <Select.Option value="مورچه">مورچه</Select.Option>
                </Select>
                <Select default-value="مورچه" style="width: 120px" loading>
                  <Select.Option value="مورچه">مورچه</Select.Option>
                </Select>
                <Select
                  show-search
                  style="width: 200px"
                  placeholder="Select a person"
                  option-filter-prop="children"
                  :filter-option="
                    (input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  "
                >
                  <Select.Option value="jack">Jack</Select.Option>
                  <Select.Option value="سعید">سعید</Select.Option>
                  <Select.Option value="tom">Tom</Select.Option>
                </Select>
              </Col>
              <Col :span="12">
                <Divider orientation="left">TreeSelect example</Divider>
                <div>
                  <TreeSelect
                    show-search
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="Please select"
                    allow-clear
                    tree-default-expand-all
                    :tree-data="treeSelectData"
                  />
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col :span="24">
                <Divider orientation="left">Modal example</Divider>
                <div>
                  <Button type="primary" @click="showModal">Open Modal</Button>
                  <Modal v-model:visible="state.modalVisible" title="پنچره ساده">
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                  </Modal>
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col :span="24">
                <Divider orientation="left">Steps example</Divider>
                <div>
                  <Steps progress-dot :current="state.currentStep">
                    <Steps.Step title="Finished" description="This is a description." />
                    <Steps.Step title="In Progress" description="This is a description." />
                    <Steps.Step title="Waiting" description="This is a description." />
                  </Steps>
                  <br />
                  <Steps :current="state.currentStep" @change="onStepsChange">
                    <Steps.Step title="Step 1" description="This is a description." />
                    <Steps.Step title="Step 2" description="This is a description." />
                    <Steps.Step title="Step 3" description="This is a description." />
                  </Steps>
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col :span="12">
                <Divider orientation="left">Rate example</Divider>
                <div>
                  <Rate v-model:value="rateValue" />
                  <br />
                  <strong>* Note:</strong>
                  Half star not implemented in RTL direction.
                </div>
              </Col>
              <Col :span="12">
                <Divider orientation="left">Badge example</Divider>
                <div>
                  <div>
                    <Badge :count="state.badgeCount">
                      <a href="#" class="head-example" />
                    </Badge>
                    <Button-group>
                      <Button @click="declineBadge">
                        <MinusOutlined />
                      </Button>
                      <Button @click="increaseBadge">
                        <PlusOutlined />
                      </Button>
                    </Button-group>
                  </div>
                  <div style="margin-top: 10px">
                    <Badge :dot="state.showBadge">
                      <a href="#" class="head-example" />
                    </Badge>
                    <Switch :checked="state.showBadge" @change="onChangeBadge" />
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
        </Row>
        <br />
        <br />
        <Row>
          <Col :span="24">
            <Divider orientation="left">Pagination example</Divider>
            <Pagination show-size-changer :default-current="3" :total="500" />
          </Col>
        </Row>
        <br />
        <Row>
          <Col :span="24">
            <Divider orientation="left">Grid System example</Divider>
            <div class="grid-demo">
              <div class="code-box-demo">
                <p>
                  <strong>* Note:</strong>
                  Every calculation in RTL grid system is from right side (offset, push, etc.)
                </p>
                <Row>
                  <Col :span="8">col-8</Col>
                  <Col :span="8" :offset="8">col-8</Col>
                </Row>
                <Row>
                  <Col :span="6" :offset="6">col-6 col-offset-6</Col>
                  <Col :span="6" :offset="6">col-6 col-offset-6</Col>
                </Row>
                <Row>
                  <Col :span="12" :offset="6">col-12 col-offset-6</Col>
                </Row>
                <Row>
                  <Col :span="18" :push="6">col-18 col-push-6</Col>
                  <Col :span="6" :pull="18">col-6 col-pull-18</Col>
                </Row>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </ConfigProvider>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch } from 'vue';
  import {
    SearchOutlined as SearchIcon,
    SmileOutlined,
    DownloadOutlined,
    LeftOutlined,
    RightOutlined,
    MinusOutlined,
    PlusOutlined,
  } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Cascader from '@sscd/cascader';
  import Divider from '@sscd/divider';
  import { Col, Row } from '@sscd/grid';
  import Input from '@sscd/input';
  import InputNumber from '@sscd/input-number';
  import Modal from '@sscd/modal';
  import Pagination from '@sscd/pagination';
  import Radio from '@sscd/radio';
  import Rate from '@sscd/rate';
  import Select from '@sscd/select';
  import Steps from '@sscd/steps';
  import Tree from '@sscd/tree';
  import TreeSelect from '@sscd/tree-select';
  import type { CascaderProps } from '@sscd/cascader';
  import type { TreeProps } from '@sscd/tree';
  import type { TreeSelectProps } from '@sscd/tree-select';
  import ConfigProvider from '@sscd/config-provider';
  const state = reactive({
    currentStep: 0,
    modalVisible: false,
    badgeCount: 5,
    showBadge: true,
    direction: 'ltr' as 'ltr' | 'rtl',
    popupPlacement: 'bottomLeft' as CascaderProps['placement'],
  });
  const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
  const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
  const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
  const treeData: TreeProps['treeData'] = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0-0-0',
          disabled: true,
          children: [
            { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
            { title: 'leaf', key: '0-0-0-1' },
          ],
        },
        {
          title: 'parent 1-1',
          key: '0-0-1',
          children: [{ key: '0-0-1-0', title: 'sss' }],
        },
      ],
    },
  ];
  const treeSelectData = ref<TreeSelectProps['treeData']>([
    {
      title: 'parent 1',
      value: 'parent 1',
      children: [
        {
          title: 'parent 1-0',
          value: 'parent 1-0',
          children: [
            { title: 'my leaf', value: 'leaf1' },
            { title: 'your leaf', value: 'leaf2' },
          ],
        },
        { title: 'parent 1-1', value: 'parent 1-1' },
      ],
    },
  ]);
  watch(
    () => state.direction,
    (directionValue) => {
      if (directionValue === 'rtl') {
        state.popupPlacement = 'bottomRight';
      } else {
        state.popupPlacement = 'bottomLeft';
      }
    }
  );
  const cascaderOptions = [
    {
      value: 'tehran',
      label: 'تهران',
      children: [
        {
          value: 'tehran-c',
          label: 'تهران',
          children: [{ value: 'saadat-abad', label: 'سعادت آیاد' }],
        },
      ],
    },
    {
      value: 'ardabil',
      label: 'اردبیل',
      children: [
        {
          value: 'ardabil-c',
          label: 'اردبیل',
          children: [{ value: 'primadar', label: 'پیرمادر' }],
        },
      ],
    },
    {
      value: 'gilan',
      label: 'گیلان',
      children: [
        {
          value: 'rasht',
          label: 'رشت',
          children: [{ value: 'district-3', label: 'منطقه ۳' }],
        },
      ],
    },
  ];
  const cascaderFilter = (inputValue, path) =>
    path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  const onCascaderChange = (value) => {
    console.log(value);
  };
  const showModal = () => {
    state.modalVisible = true;
  };
  const onStepsChange = (currentStep) => {
    console.log('onChange:', currentStep);
    state.currentStep = currentStep;
  };
  const increaseBadge = () => {
    const badgeCount = state.badgeCount + 1;
    state.badgeCount = badgeCount;
  };
  const declineBadge = () => {
    let badgeCount = state.badgeCount - 1;
    if (badgeCount < 0) {
      badgeCount = 0;
    }
    state.badgeCount = badgeCount;
  };
  const onChangeBadge = (showBadge) => {
    state.showBadge = showBadge;
  };
  const rateValue = ref(2);
</script>
<style lang="less" scoped>
  .demo {
    .demo-direction {
      .button-demo {
        .ant-btn,
        .ant-btn-group {
          margin-right: 8px;
          margin-bottom: 12px;
        }
        .ant-btn-group {
          > .ant-btn,
          > span > .ant-btn {
            margin-right: 0;
            margin-left: 0;
          }
        }
      }
      .head-example {
        display: inline-block;
        width: 42px;
        height: 42px;
        vertical-align: middle;
        background: #eee;
        border-radius: 4px;
      }
      .ant-badge:not(.ant-badge-not-a-wrapper) {
        margin-right: 20px;
      }
      .ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
        margin-right: 0;
        margin-left: 20px;
      }
    }
  }
</style>